<template>
    <div class="container">
        <div class="title">
            {{ data.name }}
            （{{ moment().format("M月D日") }} 天气预报：{{
                data.condition ? data.condition : ""
            }}）
        </div>
        <div class="weather">
            <ul class="conditions">
                <li class="conditions_title">
                    {{ moment().format("M月D日") }}天气实况
                </li>
                <li v-for="(item, index) in conditions" :key="index">
                    <img :src="item.icon" alt="" />
                    <div>
                        <span>{{ item.value }}<span> {{ item.unit }}</span></span>
                        <br />
                        <span style="color: #9da6bd; font-size: 10px">{{item.name}}</span>
                    </div>
                </li>
            </ul>
            <div class="chart">
                <div ref="chart"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import moment from "moment";
import * as echarts from 'echarts';
import WD from "../../assets/images/温度.png";
import SD from "../../assets/images/湿度.png";
import FS from "../../assets/images/风速.png";
import FX from "../../assets/images/风向.png";
import JS from "../../assets/images/降水.png";
import NJD from "../../assets/images/能见度.png";
const props = defineProps({
    data: {
        type: Object,
        default: () => {},
    },
});
const conditions = [
    {
        name: "温度",
        icon: WD,
        unit: "℃",
        value: 10,
    },
    {
        name: "湿度",
        icon: SD,
        unit: "%",
        value: 46,
    },
    {
        name: "风速",
        icon: FS,
        unit: "m/s",
        value: 1.3,
    },
    {
        name: "风向",
        icon: FX,
        unit: "",
        value: "西南",
    },
    {
        name: "降水",
        icon: JS,
        unit: "mm",
        value: 0,
    },
    {
        name: "能见度",
        icon: NJD,
        unit: "",
        value: 11500,
    },
];
const chart = ref(null);
onMounted(() => {
    initChart();
})
const initChart = () => {
    const myChart = echarts.init(chart.value);
    const option = {
        color: ["#F04621", "#1581F8"],
        tooltip: {
            show: true,
        },
        legend: {
            show: true,
        },
        grid: {
            top: 50,
            left: 40,
            right: 50,
            bottom: 30,
        },
        xAxis: {
            type: "category",
            data: [8,9,10,11,12,13,14,15,16,17,18,19,20]
        },
        yAxis: [
            {
                show: true,
                type: "value",
                name: "温度（℃）",
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: "dashed",
                    },
                },
            },
            {
                show: true,
                type: "value",
                name: "降水（mm）",
                splitLine: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: "温度",
                type: "line",
                data: [10,11,15,18,20,24,28,30,25,20,18,15,10]
            },
            {
                name: "1小时降水",
                type: "line",
                data: [0,0,0,0,0,0,0,0,0,0,0,0,0],
                yAxisIndex: 1,
            },
        ],
    }
    myChart.setOption(option);
}
</script>

<style lang="less" scoped>
.container {
    width: 700px;
    display: flex;
    flex-direction: column;
    margin-left: -21px;
    overflow: hidden;
    .title {
        font-size: 20px;
        font-weight: bold;
        padding-left: 20px;
        line-height: 20px;
        margin: 20px 0;
    }
    .weather {
        display: flex;
        flex-flow: row;
        margin-bottom: 20px;
        padding: 20px 0;
        border-top: 1px solid #d6e0ff;
        border-bottom: 1px solid #d6e0ff;
        .conditions {
            flex: 1;
            display: flex;
            flex-flow: row wrap;
            border-right: 1px solid #d6e0ff;
            .conditions_title {
                width: 100%;
                font-size: 18px;
                font-weight: bold;
                padding-left: 20px;
                font-family: sans-serif;
            }
            li {
                width: 50%;
                display: flex;
                margin-bottom: 20px;

                img {
                    width: 32px;
                    height: 32px;
                    margin-right: 8px;
                }
            }
        }
        .chart {
            flex: 1.5;
            height: 246px;
            div {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>
